iOS 16 為 SwiftUI 帶來的另一個 API 就是 ImageRenderer
。有了這個 API,我們可以輕鬆把 SwiftUI 視圖轉換為圖像。這個實作十分簡單,讓我們利用想要轉換為圖像的視圖,來實例化 ImageRenderer
的實例:
let renderer = ImageRenderer(content: theView)
然後,我們就可以存取 cgImage
或 uiImage
屬性,來取得轉換後的圖像。
一如以往,我喜歡利用範例來示範一個 API 的用法。較早之前,我們用了新的 Charts 框架來構建折線圖。這次,讓我們來看看如何讓使用者把折線圖保存為 Photo Album 中的圖像,並使用 ShareLink
進行分享。
重溫 Chart 視圖
![swiftui-line-chart](https://www.appcoda.com/wp-content/uploads/2022/07/swiftui-line-chart-symbol.png)
首先,讓我們來重溫一下 ChartView
範例。我們使用了 Charts
框架的新 API 來構建一個有關氣溫的折線圖。程式碼如下:
var body: some View {
VStack {
Chart {
ForEach(chartData, id: \.city) { series in
ForEach(series.data) { item in
LineMark(
x: .value("Month", item.date),
y: .value("Temp", item.temperature)
)
}
.foregroundStyle(by: .value("City", series.city))
.symbol(by: .value("City", series.city))
}
}
.chartXAxis {
AxisMarks(values: .stride(by: .month)) { value in
AxisGridLine()
AxisValueLabel(format: .dateTime.month(.defaultDigits))
}
}
.chartPlotStyle { plotArea in
plotArea
.background(.blue.opacity(0.1))
}
.chartYAxis {
AxisMarks(position: .leading)
}
.frame(width: 350, height: 300)
.padding(.horizontal)
}
}
要使用 ImageRenderer
,我們首先要把程式碼重構 (refactor) 為一個方法:
private func makeChartView() -> some View {
VStack {
Chart {
ForEach(chartData, id: \.city) { series in
ForEach(series.data) { item in
LineMark(
x: .value("Month", item.date),
y: .value("Temp", item.temperature)
)
}
.foregroundStyle(by: .value("City", series.city))
.symbol(by: .value("City", series.city))
}
}
.chartXAxis {
AxisMarks(values: .stride(by: .month)) { value in
AxisGridLine()
AxisValueLabel(format: .dateTime.month(.defaultDigits))
}
}
.chartPlotStyle { plotArea in
plotArea
.background(.blue.opacity(0.1))
}
.chartYAxis {
AxisMarks(position: .leading)
}
.frame(width: 350, height: 300)
.padding(.horizontal)
}
}
然後,讓我們宣告一個變數來保存視圖:
var chartView = ChartView()
利用 ImageRenderer 把視圖轉換為圖像
現在,我們可以把 Chart 視圖轉換為圖像了。我們要添加一個名為 Save to Photos 的按鈕,來把 Chart 視圖圖像儲存到 Photo Album 中。
讓我們如此實作按鈕:
var body: some View {
VStack(spacing: 20) {
chartView
HStack {
Button {
let renderer = ImageRenderer(content: chartView)
if let image = renderer.uiImage {
UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
}
} label: {
Label("Save to Photos", systemImage: "photo")
}
.buttonStyle(.borderedProminent)
}
}
}
在按鈕的閉包中,我們利用 chartView
來建立一個 ImageRenderer
的實例,並使用 uiImage
屬性來擷取生成的圖像。然後,讓我們調用 UIImageWriteToSavedPhotosAlbum
把圖像儲存到 Photo Album 中。
備註:我們需要在 info.plist 中添加一個 key Privacy - Photo Library Usage Description,讓 App 可以把圖像儲存到內置的 Photo Album 中。
添加 Share 按鈕
![swiftui-share-imagerenderer](https://www.appcoda.com/wp-content/uploads/2022/07/swiftui-imagerenderer-sharelink.png)
在上一篇文章中,我們學了如何使用 ShareLink
來顯示一個 Share Sheet。我們可以搭配 ImageRanderer
使用,輕鬆地建立讓使用者分享 Chart 視圖的功能。
為方便起見,讓我們將渲染圖像 (rendered image) 的程式碼重構為一個獨立的方法:
@MainActor
private func generateSnapshot() -> UIImage {
let renderer = ImageRenderer(content: chartView)
return renderer.uiImage ?? UIImage()
}
這個 generateSnapshot
方法會把 chartView
轉換為圖像。
備註:如果你沒有用過 @MainActor
,可以參考這篇文章。
有了這個 helper 方法,我們就可以如此在 VStack
視圖中建立一個 ShareLink
:
ShareLink(item: Image(uiImage: generateSnapshot()), preview: SharePreview("Weather Chart", image: Image(uiImage: generateSnapshot())))
.buttonStyle(.borderedProminent)
現在,當我們點擊 Share 按鈕,App 就會擷取折線圖,並讓我們以圖像形式分享圖表。
![swiftui-weather-chart-imagerenderer](https://www.appcoda.com/wp-content/uploads/2022/07/swiftui-imagerenderer-sharesheet.png)
調整圖像比例
你可能會發現渲染圖像的解析度有點低。ImageRenderer
類別有一個 scale
屬性,用來調整渲染圖像的比例。在預設情況下,這個屬性的值是 1.0。如果我們想提高圖像的解析度,可以將它設置為 2.0
或 3.0
。或者,我們可以將值設置為螢幕比例:
renderer.scale = UIScreen.main.scale
總結
有了 ImageRenderer
類別,我們就可以簡單地把任何 SwiftUI 視圖轉換成圖像。如果你的 App 支援 iOS 16 以上的版本,就可以用這個新 API 為使用者建立一些方便的功能。除了渲染圖像外,我們還可以使用 ImageRenderer
來渲染 PDF 文件。詳情可以參閱 Apple 的官方文件。
此外,Apple 也提供了一個更具體的渲染器:ChartRenderer
,來將圖表匯出為圖像。我們會在之後的文章再探索這個類別。